<html>
	<head>
		<title>Persevere Examples</title>
		<script src="js/persevere.js"></script> <!-- include the persistence framework -->
		<link rel="stylesheet" type="text/css" href="examples/examples.css"/>
	</head>
	<body>
		<h1>Persevere Examples</h1>
		These examples are intended to demonstrate how to use Persevere in JavaScript 1.7 mode.
		The JavaScript in this example runs natively (without compilation) in browsers that support
		JavaScript 1.7 (such as Firefox 2.0 +), and compilation is used for other browsers.  
		These examples should work as is
		if you have download and installed the <a href="http://www.xucia.com/page/Jsponic">Jsponic server</a>.

		<h1>Customers Example</h1>
		<a href="#" onclick="renderCustomers()">List Customers</a>
		<div id="customersDiv"></div> <!-- we render the customers in this div -->
		<div id="customerFields" style="display:none">
			<fieldset>
				<legend>Edit the customer</legend>
				<div><label for="firstName">First Name:</label><input type="text" name="firstName" /></div>
				<div><label for="lastName">Last Name:</label><input type="text" name="lastName" /></div>
				<div><label for="address">Address:</label><input type="text" name="address" /></div>
				<div><label for="phoneNumber">Phone Number:</label><input type="text" name="phoneNumber" /></div>
				<div><label for="comment">Comment:</label><input type="text" name="comment" /></div>
				<button id="customerOk">OK</button>
				<button id="customerDelete">Delete</button>
			</fieldset>
		</div>
		<button onclick="addCustomer()">Add new customer</button>
		<script>
			persevere.precompiled = true; // This assumes that the scripts are compiled on the server. If you are not using processing/compiling on the server, this should be removed
			persevere.loadScript("examples/customers.js17");
		</script>
		
		
		<h1>Blog Example</h1>
		<a href="#" onclick="renderBlog()">Display Blog Posts</a>
		<div id="blogDiv"></div> <!-- we render the blog in this div -->
		<div id="newComment" style="display:none">
			<h3>Enter a new comment</h3>
			<div>
				Author:<input type="text" id="newCommentAuthor" />
			</div>
			<div>
				Comment:<textarea id="newCommentContent"></textarea>
			</div>
			<button onclick="addCommentEntry()">Submit Comment</button>
		</div>
		<a href="#" onclick="var style = document.getElementById('newPost').style; style.display=style.display=='block'?'none':'block'">New Post</a>
		<div id="newPost" style="display:none">
			<h3>Enter a new post</h3>
			<div>
				Content:<textarea id="newPostContent">new post</textarea>
			</div>
			<button onclick="addBlogPost()">Post</button>
		</div>
		<script>
			persevere.loadScript("examples/blog.js17");
		</script>

	</body>
</html>